import React, { useRef, useState, forwardRef, useMemo, useImperativeHandle, useEffect } from 'react';
import { Image,Upload } from '@douyinfe/semi-ui';
import { useSelector } from 'react-redux';
import { selectCurrentImage, selectLayerImages } from '@/store';
import deleteIcon from "@/assets/images/imageEdit/delete.svg";
import download from "@/assets/images/imageEdit/download.svg";
import layerEditIcon from "@/assets/images/imageEdit/layer_edit_icon.svg";
import imageIcon from "@/assets/images/imageEdit/image_icon.svg";
import copy from "@/assets/images/imageEdit/copy.svg";
import add from "@/assets/images/imageEdit/add.svg";
import styles from "./index.module.scss";
import CanvasDrawing from './CanvasDrawing';
import { useVideoUpload } from '@/hooks/useVideoUpload';
import { extractFirstLastFrame } from '@/api/elementsAdd';
import { UPLOAD_CONFIG } from './constants';
import sharedWebSocket from '@/services/sharedWebSocket';

const Results = forwardRef(({ 
  resultsItemRefs,
  selectedTool,
  toolSize,
  onPointSelectionChange, // 点选变化回调
  onGreenPointSelectionChange, // 绿色点变化回调
  onBrushStrokesChange, // 画笔笔触变化回调
  onRectSelectionChange, // 框选变化回调
  showLayerHistory,// 显示图层
  onStepChange,
  step, // 步骤值
 }, ref) => {
  const canvasDrawingRef = useRef(null);
  const imageWrapperRef = useRef(null); // 图片容器ref
  const currentImage = useSelector(selectCurrentImage);
  const layerImages = useSelector(selectLayerImages);
  
  const [calculatedRatio, setCalculatedRatio] = useState(null); // 提供默认值
  useEffect(() => {
    if (step === 1&&!showLayerHistory) {
      setCalculatedRatio(null);
    }
  }, [showLayerHistory]);

  const { handleUpload, uploading, progress, validateFile, uploadedFile } = useVideoUpload({
    onSuccess: async (result) => {
      onStepChange(1)
      // 使用上传时获取的视频尺寸信息设置calculatedRatio
      if (result.videoDimensions) {
        console.log('设置视频尺寸为calculatedRatio:', result.videoDimensions);
        setCalculatedRatio({
          width: result.videoDimensions.width,
          height: result.videoDimensions.height
        });
      }
      
      // 上传成功后调用extractFirstLastFrame接口
      // try {
      //   await extractFirstLastFrame({ videoUrl: result.url });
      //   console.log('首尾帧提取请求已发送');
      // } catch (extractError) {
      //   console.error('首尾帧提取失败:', extractError);
      // }
      
      // 通过websocket发送模拟数据
      try {
        const mockData = {
          "func": "extract_first_last_frame_success", 
          "mgs": "提取首尾帧成功",
          "data":{
                "firstImage":"https://tse4-mm.cn.bing.net/th/id/OIP-C.bxjli_O6y87iJst238CJowHaD-?w=395&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3",
                "lastImage":"https://tse3-mm.cn.bing.net/th/id/OIP-C.0rOkd5_Sua9wED1IW8i2ZAHaEK?w=295&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3"
            }
        };
        const success = sharedWebSocket.ohterEmit('websocket-message', mockData);
        if (success) {
          console.log('WebSocket模拟数据已发送:', mockData);
        } else {
          console.warn('WebSocket未连接，无法发送模拟数据');
        }
      } catch (wsError) {
        console.error('WebSocket发送模拟数据失败:', wsError);
      }
    },
    onError: (error) => {
      console.error('上传失败:', error);
    }
  });
   

  
  // 图片编辑相关状态
  const [showCanvas, setShowCanvas] = useState(true); // 控制Canvas显示状态
  const [mediaTransform, setMediaTransform] = useState({
    layerStyles: {}
  }); // 媒体变换状态
  
  // 注意：现在使用视频上传时获取的尺寸信息，不再需要从DOM元素获取图片尺寸
  
  // 根据selectedTool计算eraseMode
  const eraseMode = useMemo(() => {
    switch(selectedTool) {
      case 'press': return 4; // 点选模式
      case 'brush': return 2; // 画笔模式
      case 'graphic': return 5; // 框选/橡皮擦模式
      default: return 1;
    }
  }, [selectedTool]);

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    clearCanvas: () => {
      if (canvasDrawingRef.current?.clearBrushStrokes) {
        canvasDrawingRef.current.clearBrushStrokes();
      }
    },
    getCanvasImage: () => {
      if (canvasDrawingRef.current?.getCanvasImage) {
        return canvasDrawingRef.current.getCanvasImage();
      }
      return null;
    },
    handleDownloadResizedImage: () => {
      if (canvasDrawingRef.current?.handleDownloadResizedImage) {
        return canvasDrawingRef.current.handleDownloadResizedImage();
      } else {
        console.error('CanvasDrawing组件的handleDownloadResizedImage方法不可用');
      }
    },
    setSelectedImage: (imageKey) => {
      if (canvasDrawingRef.current?.setSelectedImage) {
        canvasDrawingRef.current.setSelectedImage(imageKey);
      }
    }
  }), []);

  const resultsData = [
    {
      title: '首尾帧生视频',
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: '首尾帧生视频',
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: '首尾帧生视频',
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: '首尾帧生视频',
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: '首尾帧生视频',
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: '首尾帧生视频',
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: '首尾帧生视频',
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: '首尾帧生视频',
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
  ];

  const renderResultsImgItem = () => (
    <div className={styles.resultsImgItem}>
      <div className={styles.maskLayer}>
        <div className={styles.maskTool}>
          <Image className={styles.maskLayerImg} src={deleteIcon} preview={false} draggable={false} />
          <Image className={styles.maskLayerImg} src={download} preview={false} draggable={false} />
        </div>
        <div className={styles.maskEdit}>
          <div className={styles.maskleft}>
            <Image className={styles.maskLayerImg} src={layerEditIcon} preview={false} draggable={false} />
            <div>图层编辑</div>
          </div>
          <div className={styles.maskSeparate}></div>
          <div className={styles.maskRight}>
            <Image className={styles.maskLayerImg} src={imageIcon} preview={false} draggable={false} />
            <div>图像编辑</div>
          </div>
        </div>
      </div>
      <Image className={styles.img} src={''} preview={false} draggable={false} />
    </div>
  );

  return (
    <div className={styles.results} ref={ref} style={{position: 'relative'}}>
      <div 
        className={styles.area}
        style={{ paddingRight: '8px',display:step>0?'none':'flex' }}
      >
        <div className={styles.layerItem}>
          <Upload 
            {...UPLOAD_CONFIG} 
            className={`${styles.uploadSection} ${styles.uploadFullSize}` }  
            customRequest={async ({ file, onSuccess, onError }) => {
              try {
                const isValid = await validateFile(file);
                if (!isValid) {
                  onError?.(new Error('文件验证失败'));
                  return;
                }
                
                // 执行上传
                const result = await handleUpload(file, file.name);
                
                if (result.success) {
                  onSuccess?.(result);
                } else {
                  onError?.(result.error || new Error('上传失败'));
                }
              } catch (error) {
                console.error('上传失败:', error);
                onError?.(error);
              }
            }}
            disabled={uploading}
            onAcceptInvalid={() => {
              Toast.error({ content: '文件类型不支持，请重新选择文件', stack: true });
            }}
          >
          <div className={styles.uploadPlaceholder}>
            {uploading ? (
              <div className={styles.uploadingState}>
                <div className={styles.uploadText}>上传中... {progress}%</div>
                <div className={styles.progressBar} style={{ width: `${progress}%` }}></div>
              </div>
            ) : (
              <>
                <Image
                  src={add}
                  preview={false}
                  className={styles.uploadIcon}
                  draggable={false}
                />
                <div className={styles.uploadText}>
                  点击或拖拽上传
                </div>
              </>
            )}
          </div>
          </Upload>
        </div>
      </div>
      {step === 2 && resultsData.map((item, index) => (
        <div key={index} className={styles.resultsItem} ref={el => resultsItemRefs.current[index] = el}>
          <div className={styles.resultsHead}>
            <div className={styles.resultsHeadLeft}>
              <div className={styles.resultsHeadTitle}>{item.title}</div>
              <div className={styles.separate}></div>
              <div className={styles.resultsHeadText}>
                <div className={styles.tabText}>{item.quality}</div>
                <div className={styles.tabText}>{item.ratio}</div>

              </div>
            </div>
            <div className={styles.resultsHeadTime}>{item.time}</div>
          </div>
          <div className={styles.resultsContent}>
            {item.content}
            <Image className={styles.img} src={copy} preview={false} draggable={false} />
          </div>
          <div className={styles.resultsImgList}>
            {Array.from({ length: 4 }, (_, imgIndex) => (
              <div key={imgIndex}>{renderResultsImgItem()}</div>
            ))}
          </div>
        </div>
      ))}
      <div className={styles.resultsSingle} style={{position: 'absolute',zIndex:showLayerHistory&&calculatedRatio&&step!==2?'10':'-100'}}>
        <div ref={imageWrapperRef} style={{width:'100%',height:'100%',position: 'relative',overflow: 'hidden'}}>
          <CanvasDrawing 
            ref={canvasDrawingRef}
            eraseMode={eraseMode}
            toolSize={toolSize}
            onMediaStyleChange={setMediaTransform} // 接收样式变化通知
            onPointSelectionChange={onPointSelectionChange} // 点选变化回调
            onGreenPointSelectionChange={onGreenPointSelectionChange} // 绿色点变化回调
            onBrushStrokesChange={onBrushStrokesChange} // 画笔笔触变化回调
            onRectSelectionChange={onRectSelectionChange} // 框选变化回调
            hideDisplayCanvas={!showCanvas} // 控制显示Canvas的可见性，但保留离屏Canvas
            mediaWrapperRef={imageWrapperRef} // 传递图片容器ref
            mediaElementId="current-image" // 媒体元素ID
            enableProcessing={true} // 根据当前菜单键决定是否启用处理功能
            selectedRatio={calculatedRatio} // 传递画幅比例尺寸值
          />
          <div id="current-image" style={{position:'absolute',width:'100%',height:'100%',zIndex:5}}>
            {layerImages.map((item, index) => {
               const layerKey = `layer-${item.id}`;
               const layerStyle = mediaTransform.layerStyles?.[layerKey] || {};
               return (
                 <Image
                   key={layerKey}
                   data-key={layerKey}
                   src={item.src} 
                   preview={false} 
                   draggable={false}
                   style={{
                     ...mediaTransform,
                     ...layerStyle, // 应用每个图层的独立样式
                     display:layerStyle.width?'':'none',
                     transform: `${mediaTransform.transform || ''} translate(${(mediaTransform.imagePositions?.[layerKey]?.x || 0)}px, ${(mediaTransform.imagePositions?.[layerKey]?.y || 0)}px)`,
                     position: 'absolute',
                     zIndex: index,
                     left: '50%',
                     top: '50%',
                     // 如果有独立的宽高，需要重新计算居中位置
                     marginLeft: layerStyle.width ? -layerStyle.width / 2 : '-50%',
                     marginTop: layerStyle.height ? -layerStyle.height / 2 : '-50%'
                   }}
                 />
               );
              })}
          </div>
        </div>
      </div>
    </div>
  );
});

Results.displayName = 'Results';

export default Results;